<!-- 
      center.html
      我的， id=center
      Created by tang on 2017-03-14.
      Copyright 2017 tang. All rights reserved.
 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../js/mui.js"></script>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/center.css" />
</head>
<body class="gray">
	<header class="mui-bar mui-bar-transparent">
	    <h1 class="mui-title" style="color: #666;opacity: 0;">个人中心</h1>
	</header>
	<div class="main center loading" id="vueMain">
		<div class="ui-placehold-img head-cover">
            <span></span>
            <div class="user-head" style="position: absolute;width: 100%;  z-index: 3;" >
				<div class="name" >
					<img :src="userMsg.head_img" class="mui-pull-left link" _id="information"  _href="../center/information.html"  alt="" />
					<div>
						<h3>{{userMsg.name}}</h3>
						<p>{{userMsg.mark}}</p>
					</div>
				</div>
			</div>
        </div>
		<div class="content">
			<div class="ui-placehold-img headImg">
                <span></span>
                <div class="user-head" style="position: absolute;width: 100%;  z-index: 3;" >
					<div class="name" >
						<img :src="userMsg.head_img" class="mui-pull-left link" _id="information"  _href="../center/information.html"  alt="" />
						<div>
							<h3>{{userMsg.name}}</h3>
							<p>{{userMsg.mark}}</p>
						</div>
					</div>
				</div>
	        </div>
            <ul class="mui-table-view">
	        <li class="mui-table-view-cell tile link" _id='orderAll' _href="orderAll.html" _title="全部订单" _extras="orderType=11">
	        	 	<a class="mui-navigate-right">我的订单</a>
	        </li>
	        <li class="mui-table-view-cell">
	        		<div class="mui-row">
	        			<div class="mui-col-sm-3 mui-col-xs-3 link" _id='orderHead' _href="orderHead.html" _title="待付款" _extras="orderType=1" >
	        				<div class="icon ">
	        					<span v-if="order.no_pay!=0">{{order.no_pay}}</span>
	        					<div class="obligation"><img src="../icon/obligation-icon@2x.png" alt="" /></div>
	        					<p>待付款</p>
	        				</div>
	        			</div>
	        			<div class="mui-col-sm-3 mui-col-xs-3 link" _id='order' _href="order.html" _title="待完工" _extras="orderType=3">
	        				<div class="icon ">
	        					<span v-if="order.no_collect!=0">{{order.no_collect}}</span>
	        					<div class="delivery"><img src="../icon/delivery-icon@2x.png" alt="" /></div>
	        					<p>待完工</p>
	        				</div>
	        			</div>
	        			<div class="mui-col-sm-3 mui-col-xs-3 link" _id='order' _href="order.html" _title="待评论" _extras="orderType=4" >
	        				<div class="icon ">
	        					<span v-if="order.no_evaluate!=0">{{order.no_evaluate}}</span>
	        					<div class="appraise"><img src="../icon/appraise-icon@2x.png" alt="" /></div>
	        					<p>待评论</p>
	        				</div>
	        			</div>
	        			<div class="mui-col-sm-3 mui-col-xs-3 link" _id='order' _href="order.html" _title="退款订单" _extras="orderType=5">
	        				<div class="icon ">
	        					<div class="allorder"><img src="../icon/retreat.png" alt="" /></div>
	        					<p>退款订单</p>
	        				</div>
	        			</div>
	        		</div>
	        </li>
	    </ul>
	    <ul class="mui-table-view" style="margin-top: 10px;">
	        <li class="mui-table-view-cell tile">
	              钱包
	        </li>
	        <li class="mui-table-view-cell">
	        		<div class="mui-row">
	        			<div class="mui-col-sm-3 mui-col-xs-3 link" _id="coupon" _title="优惠券" _href="coupon.html">
	        				<div class="icon ">
	        					<div class="coupon"><img src="../icon/coupon-icon@2x.png" alt="" /></div>
	        					<p>优惠券</p>
	        				</div>
	        			</div>
	        			<div class="mui-col-sm-3 mui-col-xs-3 " onclick="mui.toast('功城师正在努力研发中')">
	        				<div class="icon ">
	        					<div class="manage"><img src="../icon/manage-icon@2x.png" alt="" /></div>
	        					<p>管理支付方式</p>
	        				</div>
	        			</div>
	        			<div class="mui-col-sm-3 mui-col-xs-3 link" _id="refundLog" _title="支付记录" _href="refundLog.html" _extras="type=2">
	        				<div class="icon ">
	        					<div class="payment"><img src="../icon/payment-icon@2x.png" alt="" /></div>
	        					<p>支付记录</p>
	        				</div>
	        			</div>
	        			<div class="mui-col-sm-3 mui-col-xs-3 link" _id="refundLog" _title="退款记录" _href="refundLog.html" _extras="type=1" >
	        				<div class="icon ">
	        					<div class="refund"><img src="../icon/refund-log@2x.png" alt="" /></div>
	        					<p>退款记录</p>
	        				</div>
	        			</div>
	        		</div>
	        </li>
	    </ul>
	    <ul class="mui-table-view" style="margin-top: 10px;">
	         <li class="mui-table-view-cell link" _id="address" _title="地址管理" _href="address.html" style="padding:13px 15px">
	            <a class="mui-navigate-right">
	               地址管理
	            </a>
	        </li>
	        <li class="mui-table-view-cell link" _id="setting" _title="账户设置" _href="../center/setting.html" style="padding:13px 15px">
	            <a class="mui-navigate-right">
	               账户设置
	            </a>
	        </li>
	    </ul>
	    <ul class="mui-table-view" style="margin-top: 10px;">
	        <li class="mui-table-view-cell link" _id="about" _title="关于我们" _href="../center/about.html">
                <a class="mui-navigate-right">
                    关于我们
                </a>
            </li>
            <li class="mui-table-view-cell link" _id="feedback" _title="意见反馈" _href="../center/feedback.html">
                <a class="mui-navigate-right">
                    意见反馈
                </a>
            </li>
	    </ul>
	    
	    <ul class="mui-table-view" style="margin-top: 10px;">
	        <li class="mui-table-view-cell link" _id="merchant" _title="申请成为商家" _href="merchant.html" style="padding:13px 15px">
	            <a class="mui-navigate-right" style="text-align: center;">
	               我要做商家
	            </a>
	        </li>
	   </ul>
	
		</div>
	</div>
<script src="../js/vue.min.js"></script>
<script src="../js/zoom/transform.js"></script>
<script src="../js/zoom/alloy_touch.js"></script>
<script src="../js/bexta.js"></script>
<script>
	var apps , isReady = false, user, views;
	
	var header = document.querySelector('header');
	header.style.paddingTop = bexta.getStatusHeight() + 'px';
	header.style.height = (44 + bexta.getStatusHeight()) + 'px';
	
	window.addEventListener('readyVue', function(){
		user = bexta.isLogin(true);
		user.name = user.name?user.name:user.mobile;
		user.head_img = user.head_img?user.head_img:'../icon/rads.png';
		if( !isReady ){
			bexta.ajax(api.user_center, function(res) {
				initVue(res, user);
			}, {data:{uid:user.uid}});
			isReady = !isReady;
		}
	});
	mui.plusReady(function () {
		bexta.getWebview().addEventListener('show', function(){
			user = bexta.isLogin(true);
			user.name = user.name?user.name:user.mobile;
			user.head_img = user.head_img?user.head_img:'../icon/rads.png';
			if( isReady ){
				bexta.ajax(api.user_center, function(res) {
					apps.order = res;
					apps.userMsg = user;
				}, {data:{uid:bexta.getStorage(USER).uid}});
			}
		});
		views = bexta.getWebview();
		views.setPullToRefresh({
	    		support: false,
			height: 50 + bexta.getStorage() + 'px',
			range: '100px',
			style: 'default',
			contentdown:{
				caption:"下拉可刷新"
			},
			contentover:{
				caption:"释放刷新"
			},
			contentrefresh:{
				caption:"正在刷新"
			}
	    }, function(){
		    	bexta.ajax(api.user_center, function(res){
		   		apps.order = res;
		   		views.endPullToRefresh();
		   },{data:{uid:bexta.getStorage(USER).uid}});
	    })
	});
	function initVue(result, user){
		apps = new Vue({
			el:'#vueMain',
			data:{
				order:result,
				userMsg:user
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				;(function(){
		document.addEventListener('touchmove', function(e) {
	        e.preventDefault();
	    }, false);
		var endMove = false, oldvalue = 0;
	    var headHeight = window.innerWidth * 310 / 750;
	    var $content = document.querySelector('.content'),
	        target = document.querySelector('.content');
	    var $coverImg = document.querySelector('.head-cover span'),
	        copyImg = document.querySelector('.head-cover span');
	    var $headImg = document.querySelector('.headImg span');
	    document.querySelectorAll('.user-head')[0].style.height = headHeight + 'px';
	    document.querySelectorAll('.user-head')[1].style.height = headHeight + 'px';
	    Transform(target);
	    Transform(copyImg);
	    
	    var startValue = 0;
	    var at = new AlloyTouch({
	        touch: ".main", //反馈触摸的dom
	        vertical: true, //不必需，默认是true代表监听竖直方向touch
	        target: target, //运动的对象
	        property: "translateY", //被滚动的属性
	        sensitivity: 1, //不必需,触摸区域的灵敏度，默认值为1，可以为负数
	        factor: 1, //不必需,默认值是1代表touch区域的1px的对应target.y的1
	        min: window.innerHeight - $content.offsetHeight, //不必需,滚动属性的最小值
	        max: 0, //不必需,滚动属性的最大值
	        spring: true, //不必需,是否有回弹效果。默认是true
	        inertia: true, //不必需,是否有惯性。默认是true
	        topDis: '.3',
	        bottomDis: '.5',
	        bottomMax: '200',
	        touchStart: function(value) {
	        },
	        touchMove: function(value) {
	        },
	        touchEnd: function(value) {
	        		if( value >= 40 && !endMove ){
           			endMove = true;
       			 	bexta.ajax(api.user_center, function(res){
				   		apps.order = res;
				   		endMove = false;
				   },{data:{uid:bexta.getStorage(USER).uid}});
               	}
	        },
	        animationEnd: function(value) {
	        },
	        reboundEnd:function(value){
	        },
	        change: function(value) {
	            if ( value > 0 ) {
	                $coverImg.style.display = 'block';
	                $headImg.style.display = 'none';
	                document.querySelector('.head-cover .user-head').style.display = 'block';
	                document.querySelector('.headImg .user-head').style.display = 'none';
	               	copyImg.scaleX = copyImg.scaleY = (headHeight + value) / headHeight;
	                document.querySelector('.mui-bar-transparent').style.backgroundColor =' rgba(255, 255, 255, 0)';
	                document.querySelector('.mui-bar-transparent .mui-title').style.opacity =0;
	                 bexta.setStatus(false)
	            } else {
	                $coverImg.style.display = 'none';
	                $headImg.style.display = 'block';
	                document.querySelector('.head-cover .user-head').style.display = 'none';
	                document.querySelector('.headImg .user-head').style.display = 'block';
	                if( value < -5 ){
	                		document.querySelector('.mui-bar-transparent').style.backgroundColor =' rgba(255, 255, 255, 1)';
	                		document.querySelector('.mui-bar-transparent .mui-title').style.opacity =1;
	                		bexta.setStatus(true)
	                }else{
		                	document.querySelector('.mui-bar-transparent').style.backgroundColor =' rgba(255, 255, 255, 0)';
		                		document.querySelector('.mui-bar-transparent .mui-title').style.opacity =0;
		                 bexta.setStatus(false)
	                }
	            }
	        }
	    })
	})();


			}
		});
	}
	
window.addEventListener('updateOrderStatus', function(){
	bexta.ajax(api.user_center, function(res) { 
		apps.order = res;
	}, {data:{uid:bexta.getStorage(USER).uid}});
});
window.addEventListener('toggleUserInfomation', function(){
	user = bexta.getStorage(USER);
	apps.userMsg.name = user.name?user.name : user.mobile;
	apps.userMsg.head_img = user.head_img?user.head_img:'../icon/rads.png';
	apps.userMsg.mark = user.mark;
});
</script>
</body>
</html>
